<template>
	<view class="detail_bg u-skeleton">
		<view class="banner_bg u-skeleton-fillet">
			<u-swiper height="500" :list="detail.images"></u-swiper>
		</view>
		<view class="base_info">
			<view class="title">{{ detail.title }}</view>
			<view class="time u-skeleton-fillet">
				<u-icon name="clock-fill" color="#24C388" size="30"></u-icon>
				<view class="text">{{ detail.time }}分钟</view>
				<view class="text">已售{{ sellCount }}</view>
			</view>
			<view class="tips">{{ detail.tips }}</view>
			<view class="money">
				<view class="price">{{ vk.pubfn.priceFilter(detail.price) }}</view>
				<view class="old_price" v-if="show">
					￥{{ vk.pubfn.priceFilter(detail.market_price) }}
				</view>
			</view>
		</view>
		<view class="tags">
			<image src="@/static/icon/icon-anxingou.png" class="img"></image>
			<view v-for="i in tags" class="tag" :key="i">
				<image src="@/static/icon/shield.png" class="icon"></image>
				<text>{{ i }}</text>
			</view>
		</view>
		<view class="tabs_bg u-skeleton-fillet">
			<u-tabs
				height="90"
				duration="0.2"
				active-color="#24C388"
				:list="list"
				:is-scroll="false"
				:current="current"
				@change="change"
			></u-tabs>
		</view>
		<view class="main u-skeleton-fillet">
			<u-parse v-if="showDetail" :html="showDetail"></u-parse>
		</view>
		<view class="btn_bg">
			<view class="btn" @tap="technician">
				{{ detail.cate === 1 ? "选择技师" : "选择向导" }}
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 项目详情
			sid: "",
			detail: {
				images: [],
				introduce: "",
				issue_order: "",
				taboo: ""
			},
			showDetail: "",
			// 选项卡
			tags: ["爽约包退", "实名认证", "资质证书"],
			list: [
				{ name: "内容介绍", value: "introduce" },
				{ name: "禁忌说明", value: "taboo" },
				{ name: "下单说明", value: "issue_order" }
			],
			current: 0,

			loading: true
		}
	},
	onLoad(opt) {
		if (opt._id) {
			this.sid = opt._id
			this.init()
		}
	},
	computed: {
		show() {
			return this.detail.market_price > this.detail.price
		},
		sellCount() {
			let a = this.detail.sell_count || 0
			let b = this.detail.create_count || 0
			return a + b
		}
	},
	methods: {
		// 初始化
		init() {
			let that = this
			vk.myfn.callFunctionForCache({
				url: "client/pub.getProjectDetail",
				loading: { name: "loading", that },
				data: { _id: this.sid },
				success: res => {
					this.detail = res.data
					this.showDetail = this.detail[this.list[0].value] || ""
					this.loading = false
				}
			})
		},
		// 选项卡切换
		change(e) {
			this.current = e
			this.showDetail = this.detail[this.list[e].value] || ""
		},
		// 选择技师
		technician() {
			vk.navigateTo("./shifu?id=" + this.sid)
		}
	}
}
</script>

<style lang="scss" scoped>
.detail_bg {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.banner_bg {
	width: 100%;
	height: 500rpx;
	overflow: hidden;
}

.base_info {
	padding: 28rpx 20rpx;
	background-color: #fff;
	.title {
		font-size: 32rpx;
		font-weight: bold;
	}
	.time {
		display: flex;
		align-items: baseline;
		font-size: 24rpx;
		color: #999999;
		padding: 20rpx 0 28rpx 0;
		.text {
			padding: 0 20rpx 0 10rpx;
		}
	}
	.money {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff5555;
		display: flex;
		align-items: flex-start;
		.price::before {
			content: "￥";
			font-size: 22rpx;
			font-weight: 400;
		}
		.old_price {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			padding: 6rpx 0 0 12rpx;
			text-decoration: line-through;
		}
	}
	.tips {
		font-size: 24rpx;
		margin-bottom: 28rpx;
	}
}

.tags {
	background-color: #e8fff6;
	padding: 18rpx 30rpx;
	display: flex;
	align-items: center;
	.tag {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
	}
	.img {
		width: 96rpx;
		height: 40rpx;
		margin-right: 36rpx;
	}
	.icon {
		width: 40rpx;
		height: 40rpx;
	}
}

.tabs_bg {
	position: sticky;
	top: 0;
	min-height: 90rpx;
	background-color: #fff;
}

.main {
	min-height: 200rpx;
	background-color: #fff;
	padding: 30rpx 20rpx 138rpx;
	margin-top: 20rpx;
	line-height: 44rpx;
}

.btn_bg {
	height: 108rpx;
	background: #fff;
	box-shadow: 0 -6rpx 20rpx rgba(0, 0, 0, 0.06);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
	.btn {
		border-radius: 38rpx;
		height: 76rpx;
		background-color: #24c388;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
}
</style>
